<template>
  <div class="fans">

        <ul class="list">
            <li class="clearFix" v-for="item in fans">
                <div class="fl left" @click="gotoAddress({path:'/otherIndex?id='+item.customer_id})">
                        <img class="icon1" :src="'http://api.piver.cn/image/users/'+item.customer_id+'.jpg'">
                        <span>{{item.firstname}}</span>
                </div>
                <div class="fr right">
                  <mt-button type="default" size="small" v-if="item.isfollowed=='0'" @click="followPeople(item.customer_id)" style="width:4rem;">+ 关注</mt-button>
                  <mt-button type="danger" size="small" v-if="item.isfollowed=='1'" @click="unfollowPeople(item.customer_id)" style="width:4rem;">√已关注</mt-button>

                </div>
            </li>
            <!--<li class="clearFix">-->
                <!--<div class="fl left">-->
                        <!--<img class="icon1" src="https://dummyimage.com/40x40">-->
                        <!--<span>陈大大</span>-->
                <!--</div>-->
                <!--<div class="fr right">-->
                        <!--<span>+ 关注</span>-->
                <!--</div>-->
            <!--</li>-->

        </ul>
  </div>
</template>

<script>
  import {Toast} from 'mint-ui'

export default {
  name: 'Fans',
  data () {
    return {
      fans:[],

    }
  },

  mounted:function(){
    this.initData();
  },
  methods:{
    gotoAddress(path){
      this.$router.push(path)
    },

    initData:function(){
        var _this =this;
        var ajaxData = {};
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;


        $.ajax({
          type:'post',
          url: RouteMap.meFansList,
          data:ajaxData,
          success:function(res){
            if(res.code == 200){
              _this.fans= res.data.list;
//              console.log(_this.fans);
            }
            else{
              //Toast(res.msg)
            }
          }
        });
      },

    followPeople:function(id){
      var  ajaxData = {};
      ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
      ajaxData.follow_customer_id = id;

      var _this=this;
      $.ajax({
        type:'post',
        url: RouteMap.followPeople,
        data:ajaxData,
        success:function(res){
          if(res.code == 200){

            //Toast(res.msg);
            _this.initData();
//               console.log(res.data)
          }
          else{
            //Toast(res.msg)
          }
        }
      })

    },

    unfollowPeople:function(id){

      var  ajaxData = {};
      ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
      ajaxData.unfollow_customer_id = id;

      var _this=this;
      $.ajax({
        type:'post',
        url: RouteMap.unfollowPeople,
        data:ajaxData,
        success:function(res){
          if(res.code == 200){

            //Toast(res.msg);
            _this.initData();
//               console.log(res.data)
          }
          else{
            //Toast(res.msg)
          }
        }
      })
    },
  }



}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.list li{
    background:#fff;
    padding:.3rem .5rem;
    border-bottom:#000 solid 1px;
}
.left .icon1{
    border-radius:50%;
  width:2rem;
  height:2rem;
}
.left span{
    line-height:2.2rem;
}
.right{
    padding:.2rem;
}
.right .icon2{

}

</style>
